import React, { useEffect, useState, useRef, memo } from 'react';
import { useNavigate } from 'react-router-dom';
import { ProductCard, NavBar, Tabs } from 'react-vant';
import Echarts1 from '../../EchartsOptions/Echarts1/index'
import Echarts2 from '../../EchartsOptions/Echarts2/index'
import Echarts3 from '../../EchartsOptions/Echarts3/index'

const Index: React.FC = memo( () => {
    const [list, setlist] = useState([]);
    const navigate = useNavigate();

    return (
        <div>
            <NavBar
                title="宝宝生长助手"
                onClickLeft={() => navigate(-1)}
            />
            <Tabs type='card' color='#e16b7b'>
                <Tabs.TabPane title={`身高曲线`}>
                    <Tabs color='#e16b7b'>
                        <Tabs.TabPane title={`0-1岁`}>
                            <Echarts1/>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`1-3岁`}>
                            123
                            <Echarts2/>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`3-7岁`}>
                            <Echarts3/>
                        </Tabs.TabPane>
                    </Tabs>
                </Tabs.TabPane>
                <Tabs.TabPane title={`体重曲线`}>
                    <Tabs color='#e16b7b'>
                        <Tabs.TabPane title={`0-1岁`}>
                            <Echarts1/>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`1-3岁`}>
                            123
                            <Echarts2/>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`3-7岁`}>
                            <Echarts3/>
                        </Tabs.TabPane>
                    </Tabs>
                </Tabs.TabPane>
            </Tabs>
        </div>
    );
})

export default Index;